<template>
  <div id="board-three-view">
<dv-full-screen-container>
  	<top-header/>
    <dv-border-box-1 class="main-content">
        <div class="first-floor">
        <board-three-first-camera/>
        <board-three-second-camera/>
        </div>
         <div class="second-floor">
           <board-three-third-camera/>
           <board-three-forth-camera/>
        </div>
      </dv-border-box-1>
</dv-full-screen-container>
  </div>
</template>
<script>

 import topHeader from './board3/topHeader.vue'
 import boardThreeFirstCamera from './board3/boardThreeFirstCamera.vue'
  import boardThreeSecondCamera from './board3/boardThreeSecondCamera.vue'
   import boardThreeThirdCamera from './board3/boardThreeThirdCamera.vue'
    import boardThreeForthCamera from './board3/boardThreeForthCamera.vue'
 export default {
   name: 'BoardThreeView',
		components: {
      topHeader,
      boardThreeFirstCamera,
      boardThreeSecondCamera,
      boardThreeThirdCamera,
      boardThreeForthCamera

   }
 }
</script>

<style lang="less">

 #board-three-view{
		width: 100%;
		height: 100%;
		background-color: #030409;
		color: #fff;

		#dv-full-screen-container {
			background-image: url('./img/bg.png');
			background-size: 100% 100%;
			box-shadow: 0 0 3px blue;
			display: flex;
			flex-direction: column;
		}

    .first-floor{
      position: relative;
      flex: 1;
			display: flex;
      height: 45%;
			box-sizing: border-box;
      flex-direction:row;
     margin: 20px;
    }
    .second-floor{
      position: relative;
      flex: 1;
      height: 45%;
			display: flex;
			box-sizing: border-box;
      flex-direction: row;
      margin: 20px;
    }
 }

</style>
